<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" media="all" type="text/css" href="style/style-demo.css">

    <script src="script/jquery-1.11.1.js"></script>
    <script src="script/jquery.easing-1.3.js"></script>
    <script src="script/jquery.mousewheel-3.1.12.js"></script>
    <script src="script/jquery.jcarousellite.js"></script>
</head>
<body>

<div id="jcl-demo">

    <!-- Demo 9 -->
    <h4 id="demo9">External Controls</h4><hr>

    <p>
        Buttons, buttons and more buttons. Feel free...
    </p>


    <div class="custom-container externalControl">
        <div>
            <a href="#" class="prev">&lsaquo;</a>
            <a href="#" class="go 1">1</a>
            <a href="#" class="go 2">2</a>
            <a href="#" class="go 3">3</a>
            <a href="#" class="go 4">4</a>
            <a href="#" class="go 5">5</a>
            <a href="#" class="go 6">6</a>
            <a href="#" class="go 7">7</a>
            <a href="#" class="go 8">8</a>
            <a href="#" class="go 9">9</a>
            <a href="#" class="go 10">10</a>
            <a href="#" class="go 11">11</a>
            <a href="#" class="go 12">12</a>
            <a href="#" class="next">&rsaquo;</a>
        </div><br><br><br>
        <div class="carousel">
            <ul>
                <li><img src="image/1.jpg"></li>
                <li><img src="image/2.jpg"></li>
                <li><img src="image/3.jpg"></li>
                <li><img src="image/4.jpg"></li>
                <li><img src="image/5.jpg"></li>
                <li><img src="image/6.jpg"></li>
                <li><img src="image/7.jpg"></li>
                <li><img src="image/8.jpg"></li>
                <li><img src="image/9.jpg"></li>
                <li><img src="image/10.jpg"></li>
                <li><img src="image/11.jpg"></li>
                <li><p>This is some <strong>strong</strong> text</p></li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>


<pre class="prettyprint">
$(".externalControl .carousel").jCarouselLite({
    visible: 3,
    start: 0,
    btnNext: ".externalControl .next",
    btnPrev: ".externalControl .prev",
    btnGo:
    [".externalControl .1", ".externalControl .2",
    ".externalControl .3", ".externalControl .4",
    ".externalControl .5", ".externalControl .6",
    ".externalControl .7", ".externalControl .8",
    ".externalControl .9", ".externalControl .10",
    ".externalControl .11", ".externalControl .12"]
});
</pre>

    <script type="text/javascript">
        $(function() {
            $(".externalControl .carousel").jCarouselLite({
                visible: 3,
                start: 0,
                btnNext: ".externalControl .next",
                btnPrev: ".externalControl .prev",
                btnGo: [".externalControl .1", ".externalControl .2",
                    ".externalControl .3", ".externalControl .4",
                    ".externalControl .5", ".externalControl .6",
                    ".externalControl .7", ".externalControl .8",
                    ".externalControl .9", ".externalControl .10",
                    ".externalControl .11", ".externalControl .12"]
            });
        });
    </script>

</div>
</body>
</html>